<template>
  <div class="site-wrapper site-page--login">
    <h3 class="login-title">管理员登录</h3>
    <el-form
      v-if="!showVerify"
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      status-icon
    >
      <el-form-item prop="username">
        <el-input v-model="dataForm.username" placeholder="帐号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="dataForm.password"
          type="password"
          placeholder="密码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          class="login-btn-submit"
          type="primary"
          @click="dataFormSubmit()"
          >登录</el-button
        >
      </el-form-item>
    </el-form>

    <verify v-if="showVerify" v-on:login="login"></verify>
  </div>
</template>

<script>
import verify from "./verify.vue";

export default {
  data() {
    return {
      showVerify: false,
      dataForm: {
        username: "admin",
        password: "123"
      },
      dataRule: {
        username: [
          { required: true, message: "帐号不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ]
      },
      captchaPath: ""
    };
  },
  created() {
    this.getCaptcha();
  },
  components: { verify }, //  局部注册
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          // 表单验证通过后在显示滑动验证组件,把表单隐藏了
          this.showVerify = true;
        }
      });
    },
    login() {
      let app = this;
      this.http
        .request({
          url: "login",
          method: "POST",
          data: this.dataForm
        })
        .then(({ data }) => {
          if (data.code == 200) {
            // 登录成功后服务端会返回token字符串,把token保存在客户端本地
            localStorage.setItem("token", data.token);

            // 跳转到首页
            app.$router.push("/");
          }
        });
    },
    // 获取验证码
    getCaptcha() {}
  }
};
</script>
